<template>
  <div>
    <el-select v-model="fieldType" :disabled="disableFieldType">
      <el-option
        v-for="item in fieldOption"
        :key="item.value"
        :value="item.value"
        :label="item.name"
      />
    </el-select>
  </div>
</template>

<script setup lang="ts" name="field">
  import { ref, onMounted, watch } from 'vue'

  // 定义父组件方法或参数结构类型
  const props = defineProps({
    // 字段选项类型，默认显示所有
    fieldOptionType: {
      type: Number,
      default: 0,
    },
    // 字段类型
    fieldType: {
      type: Number,
      default: 1,
    },
    // 是否禁用字段类型
    disableFieldType: {
      type: Boolean,
      default: false,
    },

    // 字段类型改变触发方法
    fieldTypeChange: Function,
  })

  // 1-文本，2-多行文本，3-单选，4-多选，5-多图，6-附件，7-视频，8-评分
  const fieldOption0 = [
    { value: 1, name: '文本' },
    { value: 2, name: '多行文本' },
    { value: 3, name: '单选' },
    { value: 4, name: '多选' },
    { value: 5, name: '多图' },
    { value: 6, name: '附件' },
    { value: 7, name: '视频' },
    { value: 8, name: '评分' },
  ]

  // 1-文本，2-多行文本，3-单选，4-多选，5-多图，6-附件，7-视频
  const fieldOption1 = [
    { value: 1, name: '文本' },
    { value: 2, name: '多行文本' },
    { value: 3, name: '单选' },
    { value: 4, name: '多选' },
    { value: 5, name: '多图' },
    { value: 6, name: '附件' },
    { value: 7, name: '视频' },
  ]

  const fieldOption = ref([{ value: 1, name: '文本' }])
  const fieldType = ref(1) // 字段类型
  const disableFieldType = ref(false) // 是否禁用字段类型

  // 初始化字段类型下拉选项
  const initFieldOption = (fieldOptionType: any) => {
    switch (fieldOptionType) {
      case 1:
        fieldOption.value = fieldOption1
        return
    }
    fieldOption.value = fieldOption0
  }

  // 字段类型的改变方法
  const fieldTypeChange = () => {
    props.fieldTypeChange(fieldType.value)
  }

  // 监听字段类型值的改变
  watch(
    () => fieldType.value,
    () => {
      fieldTypeChange()
    },
  )

  // 监听字段类型参数回显的改变
  watch(
    () => props.fieldType,
    () => {
      fieldType.value = props.fieldType
    },
  )

  // 监听是否禁用字段类型
  watch(
    () => props.disableFieldType,
    () => {
      disableFieldType.value = props.disableFieldType
    },
  )

  onMounted(() => {
    initFieldOption(props.fieldOptionType)
    fieldTypeChange()
  })
</script>
